<template>
  <div>
    <div id="ren-item"></div>
    <div id="query_cont"></div>
    <div @click="click">模拟请求数据按钮</div>
    <div>{{ this.string }}</div>
    <div id="my_echrts"></div>

    <div id="my_defect"></div>

    <div>
      <a
        href="mailto:112986732@qq.com?subject=test&cc=sample@hotmail.com&subject=主题&body=内容"
        >send mail</a
      >
    </div>
    <!-- <div class="edit_container" style="height: 100px">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div> -->
  </div>
</template>
<script>
// import { quillEditor } from "vue-quill-editor"; //调用编辑器
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// import {onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured} from '@vue/composition-api'
export default {
  // setup(){
  //     onBeforeMount(()=>{
  //         console.log('onBeforeMount,挂载前')
  //     }),
  //     onMounted(()=>{
  //         console.log('onMounted,挂在后')
  //     }),
  //     onBeforeUpdate(()=>{
  //         console.log('onBeforeUpdate,更新前 ')
  //     }),
  //     onUpdated(()=>{
  //         console.log('onBeforeUpdate,更新后')
  //     }),
  //     onBeforeUnmount(()=>{
  //         console.log('onBeforeUpdate,实例销毁之前')
  //     })
  //     onUnmounted(()=>{
  //          console.log('onUnmounted,实例销毁之后')
  //     })
  //     onErrorCaptured(()=>{
  //         console.log('onUnmounted,谁能告诉我这是干嘛的');
  //     })
  // },

  components: {
    // quillEditor,
  },
  data() {
    return {
      content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
      //  content:'',
      editorOption: {},
      item: "oooo",
      nameList: [
        "赵",
        "钱",
        "孙",
        "李",
        "周",
        "吴",
        "郑",
        "王",
        "冯",
        "陈",
        "褚",
        "卫",
        "蒋",
        "沈",
        "韩",
        "杨",
        "朱",
        "秦",
        "尤",
        "许",
        "何",
        "吕",
        "施",
        "张",
        "孔",
        "曹",
        "严",
        "华",
        "金",
        "魏",
        "陶",
        "姜",
        "戚",
        "谢",
        "邹",
        "喻",
        "柏",
        "水",
        "窦",
        "章",
        "云",
        "苏",
        "潘",
        "葛",
        "奚",
        "范",
        "彭",
        "郎",
        "鲁",
        "韦",
        "昌",
        "马",
        "苗",
        "凤",
        "花",
        "方",
        "俞",
        "任",
        "袁",
        "柳",
        "酆",
        "鲍",
        "史",
        "唐",
        "费",
        "廉",
        "岑",
        "薛",
        "雷",
        "贺",
        "倪",
        "汤",
        "滕",
        "殷",
        "罗",
        "毕",
        "郝",
        "邬",
        "安",
        "常",
        "乐",
        "于",
        "时",
        "傅",
        "皮",
        "卞",
        "齐",
        "康",
        "伍",
        "余",
        "元",
        "卜",
        "顾",
        "孟",
        "平",
        "黄",
        "和",
        "穆",
        "萧",
        "尹",
        "姚",
        "邵",
        "湛",
        "汪",
        "祁",
        "毛",
        "禹",
        "狄",
        "米",
        "贝",
        "明",
        "臧",
        "计",
        "伏",
        "成",
        "戴",
        "谈",
        "宋",
        "茅",
        "庞",
        "熊",
        "纪",
        "舒",
        "屈",
        "项",
        "祝",
        "董",
        "梁",
        "杜",
        "阮",
        "蓝",
        "闵",
        "席",
        "季",
        "麻",
        "强",
        "贾",
        "路",
        "娄",
        "危",
      ],
      hours: [
        // "12a",
        "1a",
        "2a",
        "3a",
        "4a",
        "5a",
        "6a",
        // "7a",
        // "8a",
        // "9a",
        // "10a",
        // "11a",
        // "12p",
        // "1p",
        // "2p",
        // "3p",
        // "4p",
        // "5p",
        // "6p",
        // "7p",
        // "8p",
        // "9p",
        // "10p",
        // "11p",
      ],
      days: [
        "AA",
        "AB",
        "AC",
        "AD",
        "AE",
        "AF",
        "AG",
        // "Sunday",
      ],
      items: [
        [0, 6, 0],
        [0, 7, 0],
        [0, 8, 0],
        [0, 9, 0],
        [0, 10, 0],
        [0, 11, 2],
        [0, 12, 4],
        [0, 13, 1],
        [0, 14, 1],
        [0, 15, 3],
        [0, 16, 4],
        [0, 17, 6],
        [0, 18, 4],
        [0, 19, 4],
        [0, 20, 3],
        [0, 21, 3],
        [0, 22, 2],
        [0, 23, 5],
        [1, 0, 7],
        [1, 1, 0],
        [1, 2, 0],
        [1, 3, 0],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [30, 24, 10, 23, 65, 87],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
        // [10, 14, 43, 50, 46, 86],
        // [13, 45, 34, 39, 78, 90],
        // [20, 98, 13, 19, 13, 76],
        // [30, 24, 10, 23, 65, 87],
        // [12, 23, 20, 35, 56, 85],
      ],
      list: [
        {
          name: "ABI",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 3,
              dataid: "Blockdot",
            },
            {
              val: 10,
              dataid: "Black",
            },
            {
              val: 13.4,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.12,
              dataid: "Bloackbint",
            },
          ],
        },

        {
          name: "9295",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 10.9,
              dataid: "Mura",
            },
            {
              val: 19.8,
              dataid: "line",
            },
            {
              val: 13.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "EAC",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 15.2,
              dataid: "Blockdot",
            },
            {
              val: 22.3,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "DOA",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 22.8,
              dataid: "line",
            },
            {
              val: 11.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "MFI",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "AFI",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "THI",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "PUI",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "DNS",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 30,
              dataid: "Blockdot",
            },
            {
              val: 20,
              dataid: "Black",
            },
            {
              val: 13,
              dataid: "Mura",
            },
            {
              val: 12.8,
              dataid: "line",
            },
            {
              val: 15.2,
              dataid: "Bloackbint",
            },
          ],
        },
        {
          name: "total",
          data: [
            {
              val: 31,
              dataid: "op9o",
            },
            {
              val: 31,
              dataid: "opo",
            },
            {
              val: 90,
              dataid: "Blockdot",
            },
            {
              val: 70,
              dataid: "Black",
            },
            {
              val: 63,
              dataid: "Mura",
            },
            {
              val: 112.8,
              dataid: "line",
            },
            {
              val: 85.2,
              dataid: "Bloackbint",
            },
          ],
        },
      ],

      listdata: [
        {
          org_name: "机构",
          upload_time: 20190304050708,
          children: [
            {
              org_name: "机构1",
              upload_time: 20190304050708,
              children: [
                {
                  org_name: "机构11",
                  upload_time: 20190304050808,
                  children: [
                    {
                      org_name: "机构111",
                      upload_time: 20190304050808,
                    },
                  ],
                },
              ],
            },
            {
              org_name: "机构2",
              upload_time: 20190304050708,
              children: [
                {
                  org_name: "机构21",
                  upload_time: 20190304050808,
                },
              ],
            },
            {
              org_name: "机构3",
              upload_time: 20190304050708,
              children: [
                {
                  org_name: "机构31",
                  upload_time: 20190304050808,
                },
              ],
            },
          ],
        },
      ],

      inYield: {
        day: [
          {
            day_1: 721,
            day_1_date: "2020/12/14",
            day_2: 721,
            day_2_date: "2020/12/15",
            day_3: 721,
            day_3_date: "2020/12/16",
            day_4: 721,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "BlackDot",
          },
          {
            day_1: 4,
            day_1_date: "2020/12/14",
            day_2: 4,
            day_2_date: "2020/12/15",
            day_3: 4,
            day_3_date: "2020/12/16",
            day_4: 4,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Block",
          },
          {
            day_1: 968,
            day_1_date: "2020/12/14",
            day_2: 968,
            day_2_date: "2020/12/15",
            day_3: 968,
            day_3_date: "2020/12/16",
            day_4: 968,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "BrightDot",
          },
          {
            day_1: 26,
            day_1_date: "2020/12/14",
            day_2: 26,
            day_2_date: "2020/12/15",
            day_3: 26,
            day_3_date: "2020/12/16",
            day_4: 26,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Line",
          },
          {
            day_1: 337,
            day_1_date: "2020/12/14",
            day_2: 337,
            day_2_date: "2020/12/15",
            day_3: 337,
            day_3_date: "2020/12/16",
            day_4: 337,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "Mura",
          },
          {
            day_1: 2056,
            day_1_date: "2020/12/14",
            day_2: 2056,
            day_2_date: "2020/12/15",
            day_3: 2056,
            day_3_date: "2020/12/16",
            day_4: 2056,
            day_4_date: "2020/12/17",
            day_5: 0,
            day_5_date: "2020/12/18",
            day_6: 0,
            day_6_date: "2020/12/19",
            day_7: 0,
            day_7_date: "2020/12/20",
            name: "total",
          },
        ],
        month: [
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 10094,
            month_3_date: "2020/12",
            name: "BlackDot",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 56,
            month_3_date: "2020/12",
            name: "Block",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 13552,
            month_3_date: "2020/12",
            name: "BrightDot",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 364,
            month_3_date: "2020/12",
            name: "Line",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 4718,
            month_3_date: "2020/12",
            name: "Mura",
          },
          {
            month_1: 0,
            month_1_date: "2020/10",
            month_2: 0,
            month_2_date: "2020/11",
            month_3: 28784,
            month_3_date: "2020/12",
            name: "total",
          },
        ],
        quarter: [
          {
            name: "BlackDot",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 10094,
            quarter_2_date: "2020/4",
          },
          {
            name: "Block",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 56,
            quarter_2_date: "2020/4",
          },
          {
            name: "BrightDot",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 13552,
            quarter_2_date: "2020/4",
          },
          {
            name: "Line",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 364,
            quarter_2_date: "2020/4",
          },
          {
            name: "Mura",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 4718,
            quarter_2_date: "2020/4",
          },
          {
            name: "total",
            quarter_1: 0,
            quarter_1_date: "2020/3",
            quarter_2: 28784,
            quarter_2_date: "2020/4",
          },
        ],
        week: [
          {
            name: "BlackDot",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 2884,
            week_2_date: "2020/48",
            week_3: 2884,
            week_3_date: "2020/49",
            week_4: 2884,
            week_4_date: "2020/50",
          },
          {
            name: "Block",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 16,
            week_2_date: "2020/48",
            week_3: 16,
            week_3_date: "2020/49",
            week_4: 16,
            week_4_date: "2020/50",
          },
          {
            name: "BrightDot",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 3872,
            week_2_date: "2020/48",
            week_3: 3872,
            week_3_date: "2020/49",
            week_4: 3872,
            week_4_date: "2020/50",
          },
          {
            name: "Line",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 104,
            week_2_date: "2020/48",
            week_3: 104,
            week_3_date: "2020/49",
            week_4: 104,
            week_4_date: "2020/50",
          },
          {
            name: "Mura",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 1348,
            week_2_date: "2020/48",
            week_3: 1348,
            week_3_date: "2020/49",
            week_4: 1348,
            week_4_date: "2020/50",
          },
          {
            name: "total",
            week_1: 0,
            week_1_date: "2020/47",
            week_2: 8224,
            week_2_date: "2020/48",
            week_3: 8224,
            week_3_date: "2020/49",
            week_4: 8224,
            week_4_date: "2020/50",
          },
        ],
        year: [
          {
            name: "BlackDot",
            year_1: 10094,
            year_1_date: "2020",
          },
          {
            name: "Block",
            year_1: 56,
            year_1_date: "2020",
          },
          {
            name: "BrightDot",
            year_1: 13552,
            year_1_date: "2020",
          },
          {
            name: "Line",
            year_1: 364,
            year_1_date: "2020",
          },
          {
            name: "Mura",
            year_1: 4718,
            year_1_date: "2020",
          },
          {
            name: "total",
            year_1: 28784,
            year_1_date: "2020",
          },
        ],
      },
 
    listtable:[
      
    ],


      formInline: {
        recipe: "VR2-1-24",
        line: "3",
        site: "",
        order: "66",
        encoder: "",
        pannalid: "44-9742282B1099C0EZEA1BC1J8190",
      },
      str: "",
      string: "",
    };
  },
  mounted() {
    this.mychrets();

    // console.log("2.0,挂载阶段");
    this.cherst();
    this.querycont();
    this.onclick();
    // var arr = this.list;
    // console.log("原始数组---------------", this.list);
    // this.calleArr(arr);

    // var f = function (x) {
    //   if (x < 2) return 1;
    //   //递归终止条件
    //   else return x * f(x - 1); //递归调用过程
    // };
    // console.log(f(4)); //返回5的阶乘值为120

    // var fun = function (json) {
    //   if (json < 10) {
    //     return 1;
    //   } else {
    //     var a = json * fun(json - 1);
    //     // console.log("模拟递归函数---------------", a);
    //     return a;
    //   }
    // };
    // console.log(fun(11));

    // this.listdata.forEach((ele) => {
    //   ele.children.forEach((ele) => {
    //     ele.children.forEach((ele) => {
    //       ele.children.forEach((ele) => {
    //         this.str += ele.name + ";";
    //       });
    //     });
    //   });
    // });
    // console.log("-----------正常循环嵌套四层", this.str);

    var con = this.listdata;
    //  console.log(con);
    this.Setrecursive(con);
    this.my_echtrscont();

    // console.log('模拟缺陷数据',this.defectNum)
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  methods: {
    onEditorReady(editor) {
      // 准备编辑器
      console.log("准备编辑器", editor);
    },
    onEditorBlur(editor) {
      // 失去焦点事件
      console.log("获得焦点事件", editor);
    },
    onEditorFocus(editor) {
      // 获得焦点事件
      console.log("获得焦点事件", editor);
    },
    onEditorChange({ editor, html, text }) {
      console.log("11111111111", editor);
      console.log("22222222222", html);
      console.log("33333333333", text); // 内容改变事
      console.log("内容改变事", this.content);
    },

    cherst() {
      let my_chets = this.$echarts.init(document.getElementById("ren-item"));
      var data = this.genData(50);
      var option = {
        title: {
          text: "同名数量统计",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          type: "scroll",
          // orient: "vertical",
          right: 10,
          top: 20,
          bottom: 20,
          x: "10%",
          y: "20%",
          data: data.legendData,
          selected: data.selected,
        },
        series: [
          {
            name: "姓名",
            type: "pie",
            radius: "55%",
            center: ["40%", "50%"],
            data: data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      my_chets.setOption(option);
    },

    genData(count) {
      var legendData = [];
      var seriesData = [];
      for (var i = 0; i < count; i++) {
        var name =
          Math.random() > 0.65
            ? this.makeWord(4, 1) + "·" + this.makeWord(3, 0)
            : this.makeWord(2, 1);
        legendData.push(name);
        seriesData.push({
          name: name,
          value: Math.round(Math.random() * 100000),
        });
      }
      return {
        legendData: legendData,
        seriesData: seriesData,
      };
    },

    makeWord(max, min) {
      var nameLen = Math.ceil(Math.random() * max + min);
      var name = [];
      for (var i = 0; i < nameLen; i++) {
        name.push(
          this.nameList[Math.round(Math.random() * this.nameList.length - 1)]
        );
      }
      return name.join("");
    },

    querycont() {
      let querychts = this.$echarts.init(document.getElementById("query_cont"));
      var data = this.items.map(function (item) {
        //  console.log('-----------------',item[0], item[1], item[2],item[3],item[4],item[5] )
        return [item[1], item[0], item[2], item[3] || "-"];
      });
      // console.log(data);
      var option = {
        tooltip: {
          position: "right",
        },
        grid: {
          height: "80%",
          top: "10%",
        },
        xAxis: {
          type: "category",
          data: this.hours,
          splitArea: {
            show: true,
          },
        },
        yAxis: {
          type: "category",
          data: this.days,
          splitArea: {
            show: true,
          },
        },
        visualMap: {
          min: 1,
          max: 50,
          calculable: true,
          orient: "horizontal",
          left: "center",
          bottom: "-5%",
        },
        series: [
          {
            name: "Punch Card",
            type: "heatmap",
            data: data,
            label: {
              show: true,
              // formatter: function (params) {
              // var  temp = []
              //   if (params.data) {
              //     temp.push(params.data)
              //     console.log(temp)
              //      return  temp;
              //   }
              // },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      querychts.setOption(option);
    },

    click() {
      this.ajax({
        url: `http://10.92.162.189:8181/v1/prod/ID000001?code1=${this.formInline.recipe}&code2=${this.formInline.pannalid}`,
        method: "GET",
      }).then((res) => {
        console.log(res.data);
      });
    },

    onclick() {
      // var temp = [];
      var a = 0;
      var b = "code";
      for (let key in this.formInline) {
        a++;
        var z = b + a;
        var ion = `${z}=${this.formInline[key]}`;
        //  temp.push(ion)
        return ion;
      }
    },

    calleArr(arr) {
      for (var i = 0; i < arr.length; i++) {
        var data = arr[i];
        if (data.children) {
          //是否还有下级
          data.name = data.name + "--name1";
          this.calleArr(data.children); //自己调用自己
        } else {
          data.name = data.name + "--最后一个";
        }
      }
      // console.log(arr, "arr============");
    },

    Setrecursive(con) {
      //递归函数
      // console.log(con);
      con.forEach((element) => {
        if (element.children) {
          // console.log('1111111111111',element.children)
          this.Setrecursive(element.children);
        } else {
          this.string += element.org_name + ";";
        }
      });
      // console.log("==============", this.string);
    },

    mychrets() {
      //模拟柱状图
      let my_echrts = this.$echarts.init(document.getElementById("my_echrts"));
      let dataname = [];
      let datalist = [];
      let titlename = [];
      // let bonname = [];
      console.log("-----------------------", this.list);
      for (let i = 0; i < this.list.length; i++) {
        dataname.push(this.list[i].name);
        datalist = this.list[i].data;
      }

      for (let i = 0; i < datalist.length; i++) {
        titlename.push(datalist[i].dataid);
      }

      // console.log("dataname-------------", dataname);
      // console.log("titlename-----------", titlename);
      var list = [];
      ////循环数组 在内部组织柱状图数据
      this.list.forEach((ele) => {
        if (ele.name == "total") {
          // temp.push(ele); 加判断后组织折线图数据
          list.push({
            name: ele.name,
            data: ele.data.map((item) => {
              return item.val;
            }),
            type: "line",
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#000",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
          });
        } else {
          // 组织所有柱状图数据
          list.push({
            name: ele.name,
            data: ele.data.map((item) => {
              return item.val;
            }),
            type: "bar",
            stack: "a",
            barWidth: 0,
            // barCateGoryGap: "30%",
            label: {
              position: "insideRight",
            },
          });
        }
      });
      // console.log("0000000000000000000", list);

      my_echrts.setOption({
        option: true,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          ///上边的名字
          data: dataname,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          height: 220,
          containLabel: true,
        },
        xAxis: {
          ///下边的名字
          type: "category",
          data: titlename,
        },
        yAxis: {
          type: "value",
        },
        series: list,
      });
    },

    my_echtrscont() {
      var keyname = [];
      // var listyear = [];
      var BlackDotlist = [];
      var Blocklist = [];
      var BrightDotlist = [];
      var Linelist = [];
      var Muralist = [];
      var totallist = [];
      var contdata = [
        "年",
        "季度(1)",
        "季度(2)",
        "月份(1)",
        "月份(2)",
        "月份(3)",
        "周(1)",
        "周(2)",
        "周(3)",
        "周(4)",
        "天(1)",
        "天(2)",
        "天(3)",
        "天(4)",
        "天(5)",
        "天(6)",
        "天(7)",
      ];
      for (let i = 0; i < this.inYield.year.length; i++) {
        keyname.push(this.inYield.year[i].name);
        if (this.inYield.year[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Block") {
          Blocklist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Line") {
          Linelist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "Mura") {
          Muralist.push(this.inYield.year[i].year_1);
        } else if (this.inYield.year[i].name == "total") {
          totallist.push(this.inYield.year[i].year_1);
        }
      }

      for (let i = 0; i < this.inYield.quarter.length; i++) {
        if (this.inYield.quarter[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.quarter[i].quarter_1);
          BlackDotlist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Block") {
          Blocklist.push(this.inYield.quarter[i].quarter_1);
          Blocklist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.quarter[i].quarter_1);
          BrightDotlist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Line") {
          Linelist.push(this.inYield.quarter[i].quarter_1);
          Linelist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "Mura") {
          Muralist.push(this.inYield.quarter[i].quarter_1);
          Muralist.push(this.inYield.quarter[i].quarter_2);
        } else if (this.inYield.quarter[i].name == "total") {
          totallist.push(this.inYield.quarter[i].quarter_1);
          totallist.push(this.inYield.quarter[i].quarter_2);
        }
      }

      for (let i = 0; i < this.inYield.month.length; i++) {
        if (this.inYield.month[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.month[i].month_1);
          BlackDotlist.push(this.inYield.month[i].month_2);
          BlackDotlist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Block") {
          Blocklist.push(this.inYield.month[i].month_1);
          Blocklist.push(this.inYield.month[i].month_2);
          Blocklist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.month[i].month_1);
          BrightDotlist.push(this.inYield.month[i].month_2);
          BrightDotlist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Line") {
          Linelist.push(this.inYield.month[i].month_1);
          Linelist.push(this.inYield.month[i].month_2);
          Linelist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "Mura") {
          Muralist.push(this.inYield.month[i].month_1);
          Muralist.push(this.inYield.month[i].month_2);
          Muralist.push(this.inYield.month[i].month_3);
        } else if (this.inYield.month[i].name == "total") {
          totallist.push(this.inYield.month[i].month_1);
          totallist.push(this.inYield.month[i].month_2);
          totallist.push(this.inYield.month[i].month_3);
        }
      }

      for (let i = 0; i < this.inYield.week.length; i++) {
        if (this.inYield.week[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.week[i].week_1);
          BlackDotlist.push(this.inYield.week[i].week_2);
          BlackDotlist.push(this.inYield.week[i].week_3);
          BlackDotlist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Block") {
          Blocklist.push(this.inYield.week[i].week_1);
          Blocklist.push(this.inYield.week[i].week_2);
          Blocklist.push(this.inYield.week[i].week_3);
          Blocklist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.week[i].week_1);
          BrightDotlist.push(this.inYield.week[i].week_2);
          BrightDotlist.push(this.inYield.week[i].week_3);
          BrightDotlist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Line") {
          Linelist.push(this.inYield.week[i].week_1);
          Linelist.push(this.inYield.week[i].week_2);
          Linelist.push(this.inYield.week[i].week_3);
          Linelist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "Mura") {
          Muralist.push(this.inYield.week[i].week_1);
          Muralist.push(this.inYield.week[i].week_2);
          Muralist.push(this.inYield.week[i].week_3);
          Muralist.push(this.inYield.week[i].week_4);
        } else if (this.inYield.week[i].name == "total") {
          totallist.push(this.inYield.week[i].week_1);
          totallist.push(this.inYield.week[i].week_2);
          totallist.push(this.inYield.week[i].week_3);
          totallist.push(this.inYield.week[i].week_4);
        }
      }

      for (let i = 0; i < this.inYield.day.length; i++) {
        if (this.inYield.day[i].name == "BlackDot") {
          BlackDotlist.push(this.inYield.day[i].day_1);
          BlackDotlist.push(this.inYield.day[i].day_2);
          BlackDotlist.push(this.inYield.day[i].day_3);
          BlackDotlist.push(this.inYield.day[i].day_4);
          BlackDotlist.push(this.inYield.day[i].day_5);
          BlackDotlist.push(this.inYield.day[i].day_6);
          BlackDotlist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Block") {
          Blocklist.push(this.inYield.day[i].day_1);
          Blocklist.push(this.inYield.day[i].day_2);
          Blocklist.push(this.inYield.day[i].day_3);
          Blocklist.push(this.inYield.day[i].day_4);
          Blocklist.push(this.inYield.day[i].day_5);
          Blocklist.push(this.inYield.day[i].day_6);
          Blocklist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "BrightDot") {
          BrightDotlist.push(this.inYield.day[i].day_1);
          BrightDotlist.push(this.inYield.day[i].day_2);
          BrightDotlist.push(this.inYield.day[i].day_3);
          BrightDotlist.push(this.inYield.day[i].day_4);
          BrightDotlist.push(this.inYield.day[i].day_5);
          BrightDotlist.push(this.inYield.day[i].day_6);
          BrightDotlist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Line") {
          Linelist.push(this.inYield.day[i].day_1);
          Linelist.push(this.inYield.day[i].day_2);
          Linelist.push(this.inYield.day[i].day_3);
          Linelist.push(this.inYield.day[i].day_4);
          Linelist.push(this.inYield.day[i].day_5);
          Linelist.push(this.inYield.day[i].day_6);
          Linelist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "Mura") {
          Muralist.push(this.inYield.day[i].day_1);
          Muralist.push(this.inYield.day[i].day_2);
          Muralist.push(this.inYield.day[i].day_3);
          Muralist.push(this.inYield.day[i].day_4);
          Muralist.push(this.inYield.day[i].day_5);
          Muralist.push(this.inYield.day[i].day_6);
          Muralist.push(this.inYield.day[i].day_7);
        } else if (this.inYield.day[i].name == "total") {
          totallist.push(this.inYield.day[i].day_1);
          totallist.push(this.inYield.day[i].day_2);
          totallist.push(this.inYield.day[i].day_3);
          totallist.push(this.inYield.day[i].day_4);
          totallist.push(this.inYield.day[i].day_5);
          totallist.push(this.inYield.day[i].day_6);
          totallist.push(this.inYield.day[i].day_7);
        }
      }
      // var list = [];
      // var dataitem = [];
      // // var temp = [];
      // dataitem.push(BlackDotlist);
      // dataitem.push(Blocklist);
      // dataitem.push(BrightDotlist);
      // dataitem.push(Linelist);
      // dataitem.push(Muralist);
      // console.log(dataitem);
      // // console.log(this.inYield);
        // for (let i = 0; i < this.bartable.length; i++) {
              //   let obj = {
              //     defect: this.bartable[i][0],
              //     opo: this.bartable[i][1],
              //     ABI: this.bartable[i][2],
              //     AFI: this.bartable[i][3],
              //     DOA: this.bartable[i][4],
              //     EAC: this.bartable[i][5],
              //     MFI: this.bartable[i][6],
              //   };
              //   this.itemslist.push(obj);
              // }
              // console.log(this.itemslist);

              // this.cont.defect = this.itemslist[0].defect;
              // this.cont.OPO = this.itemslist[0].opo;
              // this.cont.ABI = this.itemslist[0].ABI;
              // this.cont.AFI = this.itemslist[0].AFI;
              // this.cont.DOA = this.itemslist[0].DOA;
              // this.cont.EAC = this.itemslist[0].EAC;
              // this.cont.MFI = this.itemslist[0].MFI;

              // for (let i = 0; i < this.tableData.length; i++) {
              //   let itemobj = {
              //     PannalID: this.tableData[i][0],
              //     q295: this.tableData[i][1],
              //     ABI: this.tableData[i][2],
              //     AFI: this.tableData[i][3],
              //     DOA: this.tableData[i][4],
              //     EAC: this.tableData[i][5],
              //     MFI: this.tableData[i][6],
              //   };

              //   this.tablelist.push(itemobj);
              // }
              // this.PannalID = this.tablelist[0].PannalID;
              // this.q295 = this.tablelist[0].q295;
              // this.ABI = this.tablelist[0].ABI;
              // this.AFI = this.tablelist[0].AFI;
              // this.DOA = this.tablelist[0].DOA;
              // this.MFI = this.tablelist[0].MFI;
              // this.EAC = this.tablelist[0].EAC;

      var list = [];
      var items = [];
      // var temp = [];
      for (let key in this.inYield) {
        items.push(this.inYield[key]);
      }

      items.forEach((ele) => {
        console.log("--------------------", ele);

        ele.forEach((element) => {
          console.log("0000000000000000000000", element.name);
          list.push({
            name: element.name,
            type: "bar",
            stack: "1",
            label: {
              // show: true,
              position: "insideRight",

            },
          });

          // if (element.name == "total") {
          //   return ;
          // } else {
          //   // console.log("iiiiiiiiiiiiiiiiiiiiii");
          //   // list.push({
          //   //   name: ele.name,
          //   //   data: temp.map((item) => {
          //   //     return item;
          //   //   }),
          //   //   type: "bar",
          //   //   stack: "1",
          //   //   label: {
          //   //     // show: true,
          //   //     position: "insideRight",
          //   //   },
          //   // });
          // }
        });
      });
      console.log("....................", list);
      //
      let myChart = this.$echarts.init(document.getElementById("my_defect"));
      myChart.setOption({
        option: true,
        // backgroundColor:'#211551',
        title: {
          text: "9线AFI百分缺陷统计",
          left: "center",
          fontWeightL: 300,
          textStyle: {
            lineHeight: 56,
            fontSize: 14,
            manginLeft: 30,
            // color:"#ECECEC"
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: keyname,
          textStyle: {
            //  color:"#ECECEC"
          },
        },
        grid: {
          left: "0%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: contdata,
          left: 10,
        },
        yAxis: {
          type: "value",
          inverse: false,
          // max:10,
          // nameGap:25,
        },
        series: list,
        // [
        //   {
        //     name: "BlackDot",
        //     type: "bar",
        //     stack: "1",
        //     label: {
        //       // show: true,
        //       position: "insideRight",
        //     },
        //     data: BlackDotlist,
        //   },
        //   {
        //     name: "Block",
        //     type: "bar",
        //     stack: "1",
        //     label: {
        //       // show: true,
        //       position: "insideRight",
        //     },
        //     // data:[20,10,10,10]
        //     data: Blocklist,
        //   },
        //   {
        //     name: "BrightDot",
        //     type: "bar",
        //     stack: "1",
        //     label: {
        //       // show: true,
        //       position: "insideRight",
        //     },
        //     data: BrightDotlist,
        //   },
        //   {
        //     name: "Line",
        //     type: "bar",
        //     stack: "1",
        //     label: {
        //       // show: true,
        //       position: "insideRight",
        //     },
        //     data: Linelist,
        //   },
        //   {
        //     name: "Mura",
        //     type: "bar",
        //     stack: "1",
        //     label: {
        //       // show: true,
        //       position: "insideRight",
        //     },
        //     data: Muralist,
        //   },
        //   {
        //     name: "Total",
        //     type: "line",
        //     lineStyle: {
        //       normal: {
        //         type: "dashed",
        //         color: "#000",
        //       },
        //     },
        //     smooth: false,
        //     markPoint: {
        //       symbolOffset: ["70%", "90%"],
        //     },
        //     data: totallist,
        //   },
        // ],
      });
    },
  },
};
</script>

<style  scoped>
#ren-item {
  width: 100%;
  height: 400px;
}
#query_cont {
  width: 500px;
  height: 400px;
  margin: 0 auto;
}
.quill-editor {
  height: 350px;
}

#my_echrts {
  width: 100%;
  height: 400px;
}
#my_defect {
  width: 100%;
  height: 400px;
}
</style>